<template>
  <div class="header">
    <el-row :gutter="20" class="header_nac">
      <el-col :span="4" class="img_logo">
        <router-link to="/">
          <img class="home-logo" src="../assets/userLogo.jpg" alt="userLogo" />
        </router-link>
      </el-col>
      <el-col :span="16">
        <el-menu :router="true" :default-active="state.activeIndex" active-text-color="#409eff" class="el-menu-demo" mode="horizontal">
          <el-menu-item>
            <router-link to="/"> 首页 </router-link>
          </el-menu-item>
          <el-menu-item v-for="item in state.navList" :default-active="state.activeIndex" :key="item.index" :router="item.path" :index="item.index" @click="handleGoMenu(item)">{{
            item.name
          }}</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="4">
        <el-button type="success" icon="el-icon-user-solid">登录</el-button>
        <el-button type="danger" icon="el-icon-s-custom">注册</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const router = useRouter()
    const state = reactive({
      navList: [
        {
          index: 1,
          path: '/articles',
          name: '文章'
        },
        {
          index: 2,
          path: '/archive',
          name: '分类'
        },
        {
          index: 3,
          path: '/project',
          name: '项目'
        },
        {
          index: 4,
          path: '/timeline',
          name: '历程'
        },
        {
          index: 5,
          path: '/message',
          name: '留言'
        },
        {
          index: 6,
          path: '/about',
          name: '关于'
        }
      ],
      activeIndex: 1
    })
    const handleGoMenu = (row: any) => {
      state.activeIndex = row.index
      router.push(row.path)
    }
    return { state, handleGoMenu }
  }
})
</script>

<style scoped lang="scss">
.header {
  .header_nac {
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .home-logo {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
}
</style>